<template>
    <div class="container">
        <el-row justify="end" style="margin-bottom: 20px;">
            <el-col :span="6">
                <el-input v-model="select_word" placeholder="请输入收货人名称" class="handle-input mr10"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button style="margin-left: 10px;" type="primary" icon="search" @click="search();cur_page = 1">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" ref="multipleTable" border>
              <el-table-column label="兑换时间" width="150">
                   <template slot-scope="scope">
                       {{scope.row.employ_time | formatTime}}
                   </template>
              </el-table-column>
              <el-table-column prop="batch_id" label="批次">
              </el-table-column>
              <el-table-column prop="student_id" label="学号">
              </el-table-column>
              <el-table-column prop="nickName" label="学员名称">
              </el-table-column>
              <el-table-column prop="user_name" label="礼盒收货人">
              </el-table-column>
              <el-table-column prop="phone" label="礼盒收货人电话">
              </el-table-column>
              <el-table-column prop="address" label="收货地址">
              </el-table-column>
              <el-table-column prop="logistics_num" label="物流单号">
              </el-table-column>
              <el-table-column  label="操作" width=380>
                  <template slot-scope="scope">
                       <!-- {{scope.row.employ_time | formatTime}} -->
                       <el-button type="primary" @click="traceVisibleShow(scope.row)">查看物流</el-button>
                       <el-button :type="scope.row.remind == 1 ? 'info' : 'success'" @click="submitRemindUserPush(scope.row)">{{scope.row.remind == 1 ?  '重新提醒用户' : '提醒用户发货'}}</el-button>
                       <el-button type="danger" @click="uploadLogisticsShow(scope.row)">填写或者修改单号</el-button>
                   </template>
              </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="total" :page-size="10">
            </el-pagination>
        </div>
        
        <el-dialog title="物流追踪显示" :visible.sync="traceVisible">
            <div class="del-dialog-cnt" style="text-align: left">
                <div style="height: 500px;">
                    <el-steps direction="vertical" :active="logisticsTrace.length-1">
                        <div  v-for="(item,sIndex) in logisticsTrace" :key="sIndex">
                            <el-step :title="item.time" :description="item.context"></el-step>
                        </div>
                    </el-steps>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="修改物流信息" :visible.sync="uploadLogisticsVisible">
            <div class="del-dialog-cnt" style="text-align: left">
                <el-form ref="form" :model="saveData" :rules="rules">
                    <el-form-item label="物流公司" required prop="logistics_com">
                        <el-select v-model="saveData.logistics_com" placeholder="请选择">
                            <el-option
                            v-for="(item,key,index) in express"
                            :key="index"
                            :label="item"
                            :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物流单号" required prop="logistics_num">
                        <el-col :span="11">
                            <el-input style="display: inline-block" v-model="saveData.logistics_num"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="收货人名称" required prop="user_name">
                        <el-col :span="11">
                            <el-input style="display: inline-block" v-model="saveData.user_name"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="收货人电话" required prop="phone">
                        <el-col :span="11">
                            <el-input style="display: inline-block" v-model="saveData.phone"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="收货人地址" required prop="address">
                        <el-col :span="11">
                            <el-input  type="textarea" style="display: inline-block" v-model="saveData.address"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="getData();uploadLogisticsVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitLogistics()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {baiduCloud} from '@/config/env'
import {dateRegExp} from '@/config/filter'
import {obtainGiftList,obtainLogistics,uploadLogistics,remindUserPush,obtainUserSearch} from "@/config/api"
import express from '@/config/express'
export default {
    name: 'giftManage',
    filters: {
        formatTime (time) {
            return dateRegExp(( time - 0 ),'yyyy-MM-dd hh:mm:ss')
        }
    },
    data () {
        return {
            is_search: false,
            select_word: '',
            // 保存点击的数据
            saveData: {},
            // 列表数据
            tableData: [],
            // 页码
            cur_page: 1,
                // 总条数
            total: 0,
            // 保存点击的数据
            saveData: {},
            // 物流追踪显示
            traceVisible: false,
            // 物流追踪信息
            logisticsTrace: [],
            // 修改物流 显示
            uploadLogisticsVisible: false,
            // 当前物流
            currentLogistics:{
                // 物流公司
                logistics_com: '',  
                // 物流单号
                logistics_num: ''   
            },
            express: express,
            rules: {
                logistics_com: [
                    { required: true, message: '请选择物流公司'}
                ],
                logistics_num: [
                    { required: true, message: '请输入物流单号'}
                ],
                user_name: [
                    { required: true, message: '请输入收货人名称'}
                ],
                phone: [
                    { required: true, message: '请输入收货人电话'}
                ],
                address: [
                    { required: true, message: '请选择收货人地址'}
                ]
            }
        }
    },
    mounted() {
        this.getData()
        console.log('快递公司',express)
    },
    methods: {
        // 获取礼盒列表
        async getData () {
            await obtainGiftList(this.cur_page)
                .then( res => {
                    console.log(res,'礼盒列表')
                    if (res.status === 200) {
                        this.tableData = res.data;
                        this.total = res.total
                    }
                })
                .catch( err => {

                })
        },
        // 追踪物流显示
        async traceVisibleShow (row) {
            await obtainLogistics(row.logistics_com,row.logistics_num)
                .then( res => {
                    console.log('..........物流',res)
                    this.logisticsTrace = res.data.reverse();
                    this.traceVisible = true;
                })
        },
        // 修改物流信息修改
        uploadLogisticsShow (row) {
            this.saveData = row;
            this.uploadLogisticsVisible = true;
        },
        // 提交修改物流
        async submitLogistics () {
            await uploadLogistics(this.saveData.g_id,this.saveData.logistics_com,this.saveData.logistics_num,this.saveData.user_name,this.saveData.phone,this.saveData.address)
                .then( res => {
                    console.log(res,'...修改物流')
                    if (res.status === 200) {
                        this.$message({
                            message: "提交成功",
                            type: "success"
                        });
                        this.uploadLogisticsVisible = false;
                        // 重新获取数据
                        this.getData();
                    } else {
                        this.$message.error("失败");
                    }
                })
                .catch( err => {
                    // console.log(err,'........修改失败')
                    this.$message.error("失败");
                })
        },
        // 给用户发货推送消息
        async submitRemindUserPush (row) {
            await remindUserPush(row.g_id)
                .then( res => {
                    if (res.status === 200) {
                        this.$message({
                            message: "已推送成功",
                            type: "success"
                        });
                        this.getData()
                    } else {
                        this.$message.error("推送失败");
                    }
                })
        },
        // 分页导航
        handleCurrentChange(val) {
            this.cur_page = val;
           
            if (this.is_search) {
                this.search();
            } else {
                this.getData();
            }
        },
        // 学员搜索
        async search() {
            if (!this.select_word) {
                this.cur_page = 1
                this.getData();
                this.is_search = false;
                return false;
            }
            this.is_search = true;
            let name = this.select_word.replace(/(^\s*)|(\s*$)/g,"")
            await obtainUserSearch(name, this.cur_page)
                .then( res => { 
                    console.log('用户搜索',res)
                    if (res.status === 200) {
                        this.tableData = res.data
                        this.total = res.total
                    } else {
                        this.$message.error("用户不存在");
                    }
                })
        },
    }
}
</script>
